<template>
	<view style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- 搜索框 -->
		<u-sticky bgColor=white>
			<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
				<view
					style="display:flex;width: 570rpx ;background-color:#F2F2F2;align-items: center;justify-content: center;margin: 10rpx ;border-radius:40rpx;">
					<u-search margin="0 10rpx 0 0" placeholder="请输入学生姓名或手机号" actionText="搜索" v-model="nameormobile"
						@search="usersearch" @custom="usersearch"></u-search>
				</view>
				<!-- 选择搜哪些学生 -->
				<view style="display: flex; width: 160rpx;">
					<picker @change="whichxuesheng" :range="xueshengzhuangtailists">
						<text
							style="display: flex;color: gray;font-size: 25rpx;padding:5rpx;justify-content: center; border-radius: 10rpx;border: 2rpx solid black ;">{{xueshengzhuangtai}}>></text>
						<!-- <u-tag :text="xueshengzhuangtai+'>>'" type="success" plain></u-tag> -->
					</picker>
				</view>
			</view>
			<!-- 最上面的校区选择 -->
			<view style="background-color:white;box-shadow:2rpx 1rpx 2rpx 2rpx #c2c2c2;">
				<u-tabs :list="xiaoqu" lineWidth="50" lineColor="blue"
					:activeStyle="{ color: 'black',  transform: 'scale(1)'}"
					:inactiveStyle="{color: '#606266',transform: 'scale(0.9)'}" @click="change"></u-tabs>
			</view>

			<view style="display: flex;width: 90%;margin:30rpx auto 15rpx auto;font-size: 25rpx;">
				<!-- <view style="display: flex;flex:2;justify-content: center;">
				头像
			</view> -->
				<view style="display: flex;flex: 3;justify-content: center;align-items: center;">
					姓名
					<!-- <image style="width:35rpx;height:35rpx;" src="../../static/paixu.png" mode=""></image> -->
				</view>
				<view style="display: flex;flex: 3;justify-content: center;">
					课程
				</view>
				<!-- <view style="display: flex;flex: 4;justify-content: center;">
				到期日期
			</view> -->
				<view style="display: flex;flex: 2;justify-content: center;">
					已销/总课程
				</view>
			</view>
		</u-sticky>
		<view v-for="(item,index) in xueshenglist" :key="index" v-if="item.id.length!=0"
			style="display: flex; width: 90%;background-color: white;border-radius: 10rpx;margin: 10rpx auto;box-shadow: 1px 1px 5px #c2c2c2;font-size: 28rpx;padding: 0;flex-direction: column;">
			<!-- {{index}} -->
			<view v-for="(item1,index1) in item.id" @click="xueshenginfor1(item)"
				style="display: flex;justify-content: space-around; width: 90%;margin: 10rpx;font-size: 28rpx;padding: 0 ;">
				<view :class="[item.zhuangtai==1 ? 'xuanzhong' : 'weixuanzhong']">
					<view style="display: flex;width: 100%;margin-left: 15rpx;">
						<view style="display: flex;flex:2;justify-content: center; align-items: center;">
							{{item1.name}}
						</view>
						<view style="display: flex;flex:4;justify-content: center;align-items: center;">
							{{item.kecheng}}
						</view>

						<view style="display: flex;flex:1;justify-content: center;align-items: center;">
							<view class="">
								{{item.yihexiaoshu}}
							</view>
							<view style="color: blue;">
								/{{item.kechengshu}}
							</view>
						</view>
					</view>
					<view
						style="display: flex;align-items: center;margin: 15rpx 10rpx 0 25rpx;back: darkgray;justify-content: space-between">
						<view class="">
							{{item.xiaoqu}}--截止{{item.jiezhidate}},
						</view>
						<view style="background-color: blue;color:white;padding: 5rpx 10rpx;border-radius: 10rpx;">
							{{item.zhuangtai==0?' 课程已结束':item.zhuangtai==1?' 销课中':item.zhuangtai==2?' 已续费未销课':item.zhuangtai==3?' 已退费':''}}
						</view>

					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 70rpx;">
			
		</view>	
		<!-- <uni-popup  ref="popup" type="center">
			<view style="display: flex;padding: 30rpx 30rpx; background-color: white;flex-direction: column;border-radius: 20rpx;">
				<view class="">
					报名学生总数：{{shu2.total}}
				</view>
				<view class="">
					正上课数量：{{shu3.total}}
				</view>
				<view class="">
					课程已结束数量：{{shu4.total}}
				</view>
				<view class="">
					已续费数量：{{shu5.total}}
				</view>
				<view v-for="(item,index) in shu6" :key=index style="display: flex;">
					{{item._id}},学生数：{{item.total}}
				</view>
			</view>
		</uni-popup> -->
		<!-- 最下方的销课数据统计 -->
		<view style="display:flex;font-size: 26rpx; position: fixed;bottom:0;background-color:#c2c2c2;justify-content: center;align-items: center;width:749rpx;padding: 5rpx;">
			上课中:{{zhengshangke}}，已续费:{{yixufei}}，已完结:{{yiwanjie}}，已退费:{{yituifei}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ReachBottom: 0,
				xueshengzhuangtai: '正上课',
				xueshengzhuangtailists: ['正上课', '已完结', '已续费', '已退费'],
				tiaoshu: 20,
				page: 1,
				wodexiaoqu: [], //我能管理的校区
				myxiaoqu: '', //承载选择的校区
				shu2: [], //学生总数量
				shu3: [], //学生正上课的数量
				shu4: [], //学生已上完课的数量
				shu5: [], //学生已续费的数量
				shu6: [], //学生按课程名程分组
				nameormobile: '',
				name: '',
				tel: '',
				current: 0,
				zhengshangke:0,
				yiwanjie:0,
				yixufei:0,
				yituifei:0,
				xiaoqu: [], //我能管理的校区
				xueshenglist: [],
				meiyi_userinfo: [],
				show: false

			}
		},
		// 上拉触底
		onReachBottom() {
			if (this.ReachBottom == 1) {
				return uni.showToast({
					title: '已到最后一页',
					icon: 'none',
					duration: 3000
				})
			}
			this.page += 1
			this.xueshenglistfun()
		},
		async onLoad(options) {
			if (options.tel) {
				this.nameormobile = options.tel
			}
			this.xiaoqufun()
		},
		methods: {
			tongjishujufun() {
				uniCloud.callFunction({
					name: "sum",
					data: {
						leixing: 6, //类型为1时，获取我管理的校区
						xiaoqu: this.myxiaoqu,
					}
				}).then(res => {
					for(var i=0;i<res.result.data.length;i++){
						if(res.result.data[i]._id==1){
							this.zhengshangke=res.result.data[i].num
						}else if(res.result.data[i]._id==2){
							this.yixufei=res.result.data[i].num
						}else if(res.result.data[i]._id==3){
							this.yituifei=res.result.data[i].num
						}else if(res.result.data[i]._id==0){
							this.yiwanjie=res.result.data[i].num
						}
					}
				})
			},
			scrollToTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置（单位px）
					duration: 0 // 滚动动画的时长，默认300ms，单位 ms
				});
			},
			whichxuesheng(e) {
				this.xueshengzhuangtai = this.xueshengzhuangtailists[e.detail.value]
				this.page = 1
				this.ReachBottom = 0
				this.xueshenglistfun()
			},
			// 获取校区的信息
			async xiaoqufun() {
				const res = await uni.getStorageSync('aoyashengxiaoqu')
				console.log(res);
				this.xiaoqu = []
				let arr = []
				for (var i = 0; i < res.result.data.length; i++) {
					var cou = 0
					for (var j = i + 1; j < res.result.data.length; j++) {
						if (res.result.data[i].name == res.result.data[j].name) {
							cou = 9
							break
						}
					}
					if (cou == 0) {
						this.xiaoqu.push(res.result.data[i])
						arr.push(res.result.data[i].name)
					}
				}
				this.wodexiaoqu = arr
				if (this.xiaoqu.length > 1) {
					this.xiaoqu.unshift({
						name: '全部'
					})
				}
				this.myxiaoqu = this.wodexiaoqu
				this.xueshenglistfun()
				this.tongjishujufun()
			},
			//点搜索时的反应
			usersearch() {
				this.page = 1
				this.ReachBottom = 0
				this.xueshenglistfun()
				// this.tongjishujufun()
			},
			//每个校区学生的信息
			xueshenglistfun() {
				console.log('55',this.nameormobile);
				uni.showLoading({
					title: '加载中……',
					mask: true
				});
				uniCloud.callFunction({
					name: "jqlfun",
					data: {
						leixing: 0,
						tiaoshu: this.tiaoshu,
						zhuangtai: this.xueshengzhuangtai == '正上课' ? 1 : this.xueshengzhuangtai == '已完结' ? 0 : this
							.xueshengzhuangtai == '已续费' ? 2 : 3,
						xiaoqu: this.myxiaoqu,
						skip: (this.page - 1) * this.tiaoshu,
						keyword: this.nameormobile
					}
				}).then(res => {
					console.log('666',res);
					uni.hideLoading()
					if (res.result.data.length == 0 && this.page != 1) {
						this.ReachBottom = 1
						return uni.showToast({
							title: '已到最后一页',
							icon: 'none',
							duration: 3000
						})
					}
					if (this.page == 1 && res.result.data.length == 0) {
						this.xueshenglist = res.result.data
						return uni.showToast({
							title: '未搜索到符合条件的学生',
							image: '../../static/jinggao.png',
							duration: 3000
						})
					}
					if (this.page == 1) {
						this.xueshenglist = res.result.data
						this.scrollToTop()
					} else {
						this.xueshenglist.push(...res.result.data)
					}
				})
			},
			change(e) {
				this.page = 1
				this.ReachBottom = 0
				this.xueshenglist = []
				this.myxiaoqu = []
				if (e.name == '全部') {
					this.myxiaoqu = this.wodexiaoqu
				} else {
					this.myxiaoqu.push(e.name)
				}
				this.xueshenglistfun()
				this.tongjishujufun()
			},

			// 学生信息的调取
			xueshenginfor1(e) {
				uni.setStorageSync('aoyashenginfor', e)
				uni.navigateTo({
					url: '/pages/xueshenginfor1/xueshenginfor1'
				})
			},

		}
	}
</script>

<style>
	.xuanzhong {

		display: flex;
		flex: 8;
		flex-direction: column;
		margin-top: 15rpx;
	}

	.weixuanzhong {
		display: flex;
		flex: 8;
		flex-direction: column;
		margin-top: 15rpx;
		color: darkgray;
	}
</style>